<template>
<div class="order-wrap">
  <div class="order-head">
    <div class="container clearfix">
      <div class="head-logo">
        <a href=""></a>
      </div>

      <slot name="tips"></slot>

      <div class="username">{{this.$store.state.username}}</div>
    </div>

  </div>
  <div class="container">
  </div>
</div>
</template>

<script>
export default {
  name: "OrderHead",
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/mixin.scss";
@import "../../assets/scss/base.scss";
.order-wrap{
  .order-head{
    padding:30px 0;
    border-bottom: 3px solid #FF6600;
    box-sizing: border-box;
    .container{
      .head-logo{
        position: relative;
        float: left;
        width: 55px;
        height: 55px;
        background-color: #FF6600;
        overflow: hidden;
        a{
          position: absolute;
          top:0;
          left: 0;
          display: inline-block;
          width: 110px;
          height: 100%;
          &:before{
            content: '';
            @include bgImg(55px,55px,'/imgs/mi-logo.png',55px);
            transition: all .3s;
          }
          &:after{
            content: '';
            @include bgImg(55px,55px,'/imgs/mi-home.png',55px)
          }
          &:hover:before{
            margin-left: -55px;
            transition: all .3s;
          }
        }
      }
      div{
          //width: 700px;
        line-height: 55px;
          float: left;
          margin-left: 54px;
          h2{
            float: left;
            font-size: 28px;
            color: #333333;
          }
        .head-tips{
          float: left;
          margin-left: 17px;
          font-size: 14px;
          color: #999999;
          font-weight: 200;
        }
        }
      .username{
        float: right;
        font-size: 16px;
        color: #666666;
      }
    }
  }
}

</style>
